<template>
  <div class="relative">
    <h1>我的申请</h1>
    <ul class="infinite-list" style="overflow: auto">
      <li v-for="i in messageData" :key="i.id" class="infinite-list-item">
        <el-alert :title="getTitle(i.status)" :type="getType(i.status)" show-icon
          :description="i.status === 2 || i.status === 0 ? `申请事项: ${i.leaveReason}` : `申请事项: ${i.leaveReason} 失败原因: ${i.approveContent}`"
          @click="openDialog(i)" />
      </li>
    </ul>
    <el-dialog title="详细信息" v-model="dialogVisible" width="60%" @close="dialogData = null">
      <div v-if="dialogData" class="gap-1">
        <p><strong>申请事项:</strong> {{ dialogData.leaveTypeCode }}</p>
        <p v-if="dialogData.status === '申请失败'">
          <strong>失败原因:</strong> {{ dialogData.approveContent }}
        </p>
        <div>
          <p><strong>受理时间:</strong> {{ dialogData.approveTime ? `受理时间：${dialogData.approveTime}` : '未受理' }}</p>
          <p><strong>审批人:</strong> {{ dialogData.approveUserName ? `${dialogData.approveUserName}` : '未受理' }}</p>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="申请" v-model="dialogAdd" width="80%" @close="dialogData = null">
      <el-form label-width="100px" class=" text-center pt-1 justify-center ">
        <el-select v-model="addData.leaveTypeCode" placeholder="选择事项" size="large" style="width: 240px">
          <el-option label="请假" value="请假" />
        </el-select>
        <el-form-item label="申请时间" class="mt-2">
          <div class="demo-datetime-picker">
            <div class="block">
              <el-date-picker size="large" v-model="addData.leaveStartTime" type="datetime" placeholder="选择时间"
                format="MM-DD HH:mm" date-format="MMM DD, YYYY" time-format="HH:mm" style="width: 140px" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="结束时间">
          <div class="demo-datetime-picker">
            <div class="block">
              <el-date-picker size="large" v-model="addData.leaveEndTime" type="datetime" placeholder="选择时间"
                format="MM-DD HH:mm" date-format="MMM DD, YYYY" time-format="HH:mm" style="width: 140px" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="申请原因">
          <el-input v-model="addData.leaveReason" placeholder="请输入申请原因" type="textarea"></el-input>
        </el-form-item>

      </el-form>
      <el-button type="primary" @click="add" class="ml-5">申请</el-button>
      <el-button @click="dialogAdd = false">取消</el-button>
    </el-dialog>
  </div>
  <div
    class="rounded-full bg-green-200 w-7 h-7 text-center justify-center flex absolute bottom-10 right-2 items-center z-20"
    @click="newAdd">
    <el-icon>
      <Plus />
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import { getApply, getLeaveById, addLeave } from '@/api';
import { onMounted, ref } from 'vue';
import { useUserStore } from '@/store/useUserStore';
import { ElDialog, ElAlert, ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import Leave from './type'//请假类型
import dayjs from 'dayjs';
const userStore = useUserStore();
const messageData = ref([]);
const dialogVisible = ref(false);
const dialogData = ref(null);
const dialogAdd = ref(false);
const addData = ref({
  id: 0,
  userId: userStore.id,//默认为当前用户进行提交
  createTime: dayjs().format('YYYY-MM-DD'),
  leaveStartTime: "",
  leaveEndTime: "",
  leaveReason: "",
  leaveTypeCode: "",
  approveUserId: '',
  approveTime: '',
  approveContent: "",
  status: 1,//默认设置为待审批状态为待审批状态
  realEndTime: ""

})

const init = () => {
  getLeaveById(userStore.id).then((res) => {
    messageData.value = res.data.data;
  });
}


onMounted(() => {
  init();
});

// 计算属性来获取标题
const getTitle = (status) => {
  switch (status) {
    case 2:
      return '申请成功';
    case 0:
      return '申请中';
    case 3:
      return '申请失败';
    default:
      return '未知状态';
  }
};

// 计算属性来获取类型
const getType = (status) => {
  switch (status) {
    case 2:
      return 'success';
    case 0:
      return 'warning';
    case 3:
      return 'error';
    default:
      return 'info';
  }
};

const openDialog = (data) => {
  dialogVisible.value = true;
  dialogData.value = data;
}

const newAdd = () => {
  dialogAdd.value = true;
}

const add = () => {
  console.log(addData.value);
  addLeave(addData.value).then((res) => {
    if (res.data.code === 200) {
      ElMessage.success('申请成功');
      dialogAdd.value = false;
    }
    init();
  })
}
</script>

<style scoped lang="less">
/* 你的样式 */

.demo-datetime-picker {
  display: flex;
  // width: 10%;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}

.demo-datetime-picker .block {
  padding: 10px 0;
  text-align: center;
}
</style>